<template>
	<view :class="tcpbackground">
		<!-- 榜单主体区域 -->
		<view class="tcpcontents">
			<view class="tcpcontentsimg">
				<image  class="tcpcontentsimg_img" :src="tcpcontent.coverImgUrl" mode="widthFix"></image>
				<text class="tcpcontentsimg_text">{{tcpcontent.playCount}}</text>
			</view>
			<view class="tcpcontentsright">
				<text class="tcpcontentsright_title">{{tcpcontent.name}}</text>
				<view class="tcpcontentsrightimg">
					<image mode="widthFix" class="tcpcontentsrightimg_img" :src="tcpcontent.creator.avatarUrl"></image>
					<text class="tcpcontentsrightimg_text">{{tcpcontent.creator.nickname}}</text>
				</view>
				<view class="tcpcontentsrightcontent">
					<text class="tcpcontentsrightcontent_text">{{tcpcontent.description}}...</text>
					<image class="tcpcontentsrightcontent_img" src="../../static/jiantou.png"></image>
				</view>
			</view>
		</view>
		<!-- 榜单列表区域 -->
		<view class="tcplistitem">
			<!-- 列表头部 -->
			<view class="tcplistitem_sum">
				<image class="tcplistitem_sum_img" src="../../static/bofang.png"></image>
				<text class="tcplistitem_sum_title">播放全部</text>
				<text class="tcplistitem_sum_count">(共{{tcpcontent.trackCount}}首)</text>
			</view>
			<!-- 列表主体 -->
			<view class="tcplistul">
				<view @click="plays(item.al)" class="tcplistli" v-for="(item,index) of tcpcontent.tracks" :key="index">
					<text class="tcplistli_index">{{index+1}}</text>
					<view class="tcplistli_con">
						<text class="tcplistli_con_name">{{item.name}}</text>
						<text class="tcplistli_con_title">{{item.ar[0].name}}-{{item.al.name}}</text>
					</view>
					<image class="tcplistli_con_img" src="../../static/bofang2.png"></image>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default{
		data(){
			return{
				// 不同榜单的颜色
				colorobj:["#558fd1","#4cb8be","#c8476b","#b35749"],
				// 榜单id
				tcpid:'',
				// 榜单主题区域 榜单列表区域
				tcpcontent:[],
				// 榜单列表区域
				// tcplist:[],
				// 背景颜色
				tcpbackground:''
			}
		},
		onLoad(e) {
			this.tcpid=e.id
			this.gettcplist(e.id)
		},
		onReady() {
			if(this.tcpid==19723756){
				this.navlogin(this.colorobj[0])
				this.tcpbackground="tcpbiao"
			}else if(this.tcpid==3779629){
				this.navlogin(this.colorobj[1])
				this.tcpbackground="tcpxin"
			}else if(this.tcpid==2884035){
				this.navlogin(this.colorobj[2])
				this.tcpbackground="tcpre"
			}else if(this.tcpid==3778678){
				this.navlogin(this.colorobj[3])
				this.tcpbackground="tcpyuan"
			}
		},
		onReachBottom(e) {
			// console.log(e,"chudile")
		},
		methods:{
			// 头部导航
			navlogin(color){
				// 设置头部导航
				uni.setNavigationBarTitle({
					title:"歌单"
				})
				uni.setNavigationBarColor({
					backgroundColor:color,
					frontColor:"#ffffff"
				})
			},
			// 获取榜单列表
			gettcplist(id){
				uni.request({
					url:"https://autumnfish.cn/playlist/detail?id="+id,
					success:res=>{
						res.data.playlist.description=res.data.playlist.description.slice(0,35)
						this.tcpcontent=res.data.playlist
					}
				})
			},
			// 点击播放单曲
			plays(playobj){
				uni.navigateTo({
					url:"./plays?id="+playobj.id+"&name="+playobj.name+"&picurl="+playobj.picUrl+"&pic="+playobj.pic+"&pic_str="+playobj.pic_str
				})
			}
		},
	}
</script>

<style>
	.tcpbiao{
		background-color:#558fd1;
	}
	.tcpxin{
		background-color:#4cb8be
	}
	.tcpre{
		background-color:#c8476b
	}
	.tcpyuan{
		background-color:#b35749
	}
	.tcpcontents{
		padding: 24rpx;
		display: flex;
		width: 100%;
		box-sizing: border-box;
	}
	.tcpcontentsimg{
		width:240rpx;
		position: relative;
		margin-right: 26rpx;
	}
	.tcpcontentsimg_img{
		width: 100%;
		border-radius: 14rpx;
	}
	.tcpcontentsimg_text{
		position: absolute;
		right: 6rpx;
		top: 6rpx;
		font-size: 24rpx;
		color: #fff;
	}
	.tcpcontentsright{
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	.tcpcontentsright_title{
		color: #fff;
	}
	.tcpcontentsrightimg{
		display: flex;
		align-items: center;
	}
	.tcpcontentsrightimg_img{
		width: 50rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}
	.tcpcontentsrightimg_text{
		font-size: 24rpx;
		color:rgba(255,255,255,.8);
	}
	.tcpcontentsrightcontent{
		color:rgba(255,255,255,.4);
		font-size: 20rpx;
		line-height: 40rpx;
		padding-right: 30rpx;
	}
	.tcpcontentsrightcontent_img{
		width: 30rpx;
		height: 30rpx;
		vertical-align: middle;
		margin-left: 20rpx;
	}
	.tcplistitem{
		border-radius: 16rpx;
		background-color: #fff;
		padding: 30rpx;
	}
	.tcplistitem_sum{
		display: flex;
		align-items: center;
	}
	.tcplistitem_sum_img{
		width:50rpx;
		height: 50rpx;
		margin-right: 30rpx;
	}
	.tcplistitem_sum_title{
		font-size: 32rpx;
		margin-right: 10rpx;
	}
	.tcplistitem_sum_count{
		font-size: 28rpx;
		color: #ccc;
	}
	.tcplistul{
		padding-top: 30rpx;
	}
	.tcplistli{
		display: flex;
		align-items: center;
		padding: 20rpx 0;
	}
	.tcplistli_index{
		width: 50rpx;
		height: 50rpx;
		font-size: 26rpx;
		color: #ccc;
	}
	.tcplistli_con{
		display: flex;
		flex-direction: column;
		flex:1
	}
	.tcplistli_con_name{
		font-size: 32rpx;
	}
	.tcplistli_con_title{
		font-size: 24rpx;
		color: #666;
	}
	.tcplistli_con_img{
		width: 50rpx;
		height: 50rpx;
	}
</style>
